<div class="col-11 col-md-9 col-lg-5">
  <div class="custom-card bg-charcoal-surface1 h-100 thumbnail-hover-dark">
    <!-- Thumbnail -->
    <a href="/users/{{ .UserID }}/series/{{ .ID }}">
      <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
        <img src="{{ .Thumbnail }}" class="card-img-top rounded-top-5" alt="{{ .Title }}" />
      </div>
    </a>
    <div class="custom-card-body">
      <!-- Title -->
      <div class="d-flex flex-column mb-3">
        <h3 class="lh-lg mb-0">
          <a href="/users/{{ .UserID }}/series/{{ .ID }}" class="text-body text-decoration-none">
            {{- .Title }}
          </a>
        </h3>
        <small class="text-body-secondary">
          Updated at {{ parseTime:.UpdateDate }}<span class="mx-1">&#x30FB;</span>{{- if .Total == 1 }}{{ .Total }} chapter{{- else }}{{ .Total }} chapters{{- end }}
        </small>
      </div>
      <!-- Read from the beginning button -->
      <a href="/artworks/{{ .FirstIllustID }}" type="button" class="custom-btn-secondary">
        <i class="bi bi-arrow-right me-2"></i>Read from the beginning
      </a>
    </div>
  </div>
</div>
